<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col :span="6">
					<el-input @clear="getUserList" placeholder="userid" v-model="custId" clearable>
						<el-button slot="append" @click="getUserList" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
			</el-row>
			<el-table :data="userList" border stripe>
				<el-table-column label="userid" prop="custId"></el-table-column>
				<el-table-column label="手机号" prop="phone"></el-table-column>
				<el-table-column label="注册时间" prop="createTime"></el-table-column>
				<el-table-column label="来源" prop="platFrom"></el-table-column>
				<el-table-column label="是否实名" prop="realCertify"></el-table-column>
				<el-table-column label="是否绑卡" prop="bankcardCertify"></el-table-column>
				<el-table-column label="上次登录设备" prop="platFrom"></el-table-column>
				<el-table-column label="借款记录">
					<el-tooltip :enterable="false" effect="dark" content="查看" placement="top">
						<el-button size="small" type="primary" icon="el-icon-link"></el-button>
					</el-tooltip>
				</el-table-column>
				<el-table-column label="购买记录">
					<el-tooltip :enterable="false" effect="dark" content="查看" placement="top">
						<el-button size="small" type="primary" icon="el-icon-link"></el-button>
					</el-tooltip>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip :enterable="false" effect="dark" content="查看详情信息" placement="top">
							<el-button @click="showUserDialog(scope.row.custId)" size="small" type="primary" icon="el-icon-info"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageNum"
			  :page-sizes="[5, 10, 15, 20]"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<!-- 查看详情弹窗 -->
			<el-dialog
			  title="用户详情信息"
			  :visible.sync="UserDialogVisible"
			  width="80%"
			  class="userDialog">
				<el-form ref="userFormRef" :model="userForm" label-width="110px">
					<el-form-item label="userid">
						<el-input v-model="userForm.custId" disabled></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="userForm.phone" disabled></el-input>
					</el-form-item>
					<el-form-item label="注册时间">
						<el-input v-model="userForm.createTime" disabled></el-input>
					</el-form-item>
					<el-form-item label="注册来源">
						<el-input v-model="userForm.registerSource" disabled></el-input>
					</el-form-item>
					<el-form-item label="是否实名">
						<el-input v-model="userForm.realCertify" disabled></el-input>
					</el-form-item>
					<el-form-item label="人脸照片">
						<el-button type="primary" @click="showPic" plain>查看</el-button>
					</el-form-item>
					<!-- <el-form-item label="身份证照片">
						<el-button type="primary" @click="showcardPic" plain>查看</el-button>
					</el-form-item> -->
					<el-form-item label="用户姓名">
						<el-input v-model="userForm.custName" disabled></el-input>
					</el-form-item>
					<el-form-item label="身份证号">
						<el-input v-model="userForm.idCard" disabled></el-input>
					</el-form-item>
					<el-form-item label="是否绑卡">
						<el-input v-model="userForm.bankcardCertify" disabled></el-input>
					</el-form-item>
					<el-form-item label="银行卡">
						<el-input v-model="userForm.bankcardNo" disabled></el-input>
					</el-form-item>
					<el-form-item label="百信剩余额度">
						<el-input v-model="userForm.usableAmount" disabled></el-input>
					</el-form-item>
					<el-form-item label="是否借款">
						<el-input v-model="userForm.auditStatus" disabled></el-input>
					</el-form-item>
					<el-form-item label="上次登录时间">
						<el-input v-model="userForm.enterTime" disabled></el-input>
					</el-form-item>
					<el-form-item label="上次登录设备">
						<el-input v-model="userForm.platFrom" disabled></el-input>
					</el-form-item>
					<el-form-item label="家庭住址">
						<el-input v-model="userForm.homeAddress" disabled></el-input>
					</el-form-item>
					<el-form-item label="公司名称">
						<el-input v-model="userForm.workName" disabled></el-input>
					</el-form-item>
					<el-form-item label="工作地址">
						<el-input v-model="userForm.workAddress" disabled></el-input>
					</el-form-item>
					<el-form-item label="联系人姓名">
						<el-input v-model="userForm.contactName" disabled></el-input>
					</el-form-item>
					<el-form-item label="联系人手机号">
						<el-input v-model="userForm.contactPhone" disabled></el-input>
					</el-form-item>
				</el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="UserDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>
			
			<!-- 人脸照片弹窗 -->
			<el-dialog
			  title="照片"
			  :visible.sync="PicDialogVisible"
			  width="60%" class="popup">
				<img class="dialog-img" :src="userForm.fileVOList[2].filePath" />
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="PicDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>

			<!-- 身份证照片弹窗 -->
			<!-- <el-dialog
			  title="照片"
			  :visible.sync="CardDialogVisible"
			  width="60%" class="popup">
					<img class="dialog-img" :src="userForm.fileVOList[0].filePath" />
					<img class="dialog-img" :src="userForm.fileVOList[1].filePath" />
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="CardDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog> -->
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList:[],
				custId: '',
				total:0,
				pageSize:15,
				pageNum:1,
				UserDialogVisible:false,
				userForm:{
					custId: "",
					phone: "",
					createTime: "",
					registerSource: "",
					realCertify: "",
					custName: "",
					idCard: "",
					bankcardCertify: "",
					bankcardNo: "",
					usableAmount: "",
					auditStatus: "",
					enterTime: "",
					platFrom: "",
					homeAddress: "",
					workName: "",
					workAddress: "",
					contactName: "",
					contactPhone: "",
					fileVOList:{}
				},
				PicDialogVisible:false,
				// CardDialogVisible:false,
			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			async getUserList(){
				const {data:res} = await this.$http.post('/customer/list',{pageSize:this.pageSize,pageNum:this.pageNum,custId:this.custId })
				// console.log(res);
				this.userList = res.data.customerList
				this.total = res.data.total
				
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getUserList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageNum = val
				this.getUserList()
			},
			async showUserDialog(custId){
				// console.log(custId);
				const {data:res} = await this.$http.post('/customer/findCustomerInfoByCustId',{custId:custId})
				this.UserDialogVisible = true
				this.userForm = res.data
				// console.log(this.userForm);
			},
			showPic(){
				this.PicDialogVisible = true
			},
			// showcardPic(){
			// 	this.CardDialogVisible = true
			// }
		}
	}
</script>

<style lang="less" scoped>
	.userDialog{
		.el-form{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.el-form-item{
				width: 48%;
			}
		}
	}
	.popup{
		text-align: center;
	}
	.dialog-img{
		width: 30%;
	}
</style>
